<!-- @format -->

<template>
  <div class="mb-3">
    <base-card :title="item.topic">
      <template #titleAction>
        <van-tag v-if="item.state === 5 || item.state === 3" type="danger">{{
          item.stateDesc
        }}</van-tag>
        <van-tag v-if="item.state === 2" type="success">{{
          item.stateDesc
        }}</van-tag>
        <van-tag v-if="item.state === 1 || item.state === 4" type="primary">{{
          item.stateDesc
        }}</van-tag>
      </template>
      <div class="card-container">
        <van-cell title="会议编号">{{ item.meetingCode }}</van-cell>
        <van-cell title="会议类型">{{ item.shapeDesc }}</van-cell>
        <van-cell title="审核状态">{{ item.stateDesc }}</van-cell>
        <van-cell title="会议时间">{{ item.startTime }}</van-cell>
        <van-cell title="会议地点/链接" v-if="item.shape == 1">
          {{ item.address || "" }}
          <van-button
            size="mini"
            icon="column"
            class="ml-2"
            @click.stop="clickCopy(item)"
            >复制</van-button
          >
        </van-cell>
        <van-cell title="会议总费用"
          >￥{{ getPrice(item.countMoney || 0) }}</van-cell
        >
        <van-cell title="会议海报">
          <van-button size="mini" class="ml-2" @click.stop="clickPoster"
            >点击查看</van-button
          >
        </van-cell>
        <van-cell title="参会讲者">{{ item.speakerNames }}</van-cell>
      </div>
      <div class="card-handle van-hairline--top">
        <div
          class="text-danger"
          @click="clickCancel"
        >
          <van-icon name="delete-o" />
          <span> 删除会议</span>
        </div>
        <div
          class="text-primary"
          @click="clickUpdate"
        >
          <van-icon name="edit" />
          <span> 编辑会议</span>
        </div>
        <div
          class="text-primary"
          @click="clickDetail"
        >
          <van-icon name="eye-o" />
          <span> 会议详情</span>
        </div>
        <div
          class="text-primary"
          v-if="[2].includes(item.state) && item.shape == 2"
          @click="clickSettle"
        >
          <van-icon name="cash-back-record-o" />
          <span> 会议结算</span>
        </div>
      </div>
    </base-card>
  </div>
  <van-action-sheet
    v-model:show="poster.visible"
    title="长按保存图片"
    @close="clickClosePoster"
  >
    <img style="max-width: 100%; vertical-align: middle" :src="poster.url" />
  </van-action-sheet>

  <van-dialog v-model:show="groupChat.visible" title="会议支持微信群二维码">
    <div class="pt-4 pl-4 pr-4 pb-4">
      <img
        style="max-width: 100%; vertical-align: middle"
        :src="groupChat.url"
      />
    </div>
  </van-dialog>
</template>

<script setup>
import useClipboard from "vue-clipboard3";
import { showSuccessToast, showToast, showConfirmDialog } from "vant";
import { useRouter } from "vue-router";
import { toRefs, reactive, inject } from "vue";
import useUtils from "@/hooks/useUtils";

const emits = defineEmits(["refresh"]);
const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
});
const api = inject("api");
const { toClipboard } = useClipboard();
const router = useRouter();
const { getPrice } = useUtils();

const poster = reactive({
  visible: false,
  url: "",
});

// 点击删除会议
function clickCancel() {
  const { item } = toRefs(props);
  showConfirmDialog({
    title: "温馨提示",
    message: "确定取消本场会议吗？",
  })
    .then(() => {
      return api.meetingCancel(item.value.id);
    })
    .then(() => {
      showToast("取消成功");
      emits("refresh");
    })
    .catch(() => {});
}
// 点击编辑
function clickUpdate() {
  const { item } = toRefs(props);
  router.push({
    path: `/vol/apply-meeting/${item.value.id}`,
    query: {
      handleType: "update",
    },
  });
}
// 会议结算
function clickDetail() {
  const { item } = toRefs(props);
  router.push({
    path: `/vol/detail-meeting/${item.value.id}`,
    query: {
      handleType: "detail",
      id:item.value.id
    },
  });
}
// 会议结算
function clickSettle() {
  const { item } = toRefs(props);
  router.push({
    path: `/vol/settle-meeting/${item.value.id}`,
    query: {
      handleType: "settle",
    },
  });
}

// 查看海报
async function clickPoster() {
  const { data } = await api.generatePoster(props.item.id);

  // if (!data) {
  //   showToast("海报正在生成中...");
  //   return;
  // }
  poster.url = `//projectimg-1256680128.cos.ap-beijing.myqcloud.com/poster/mt1772617178971705345.png`;
  poster.visible = true;
  // router.push(`/poster/${item.value.id}`)
}

const groupChat = reactive({
  visible: false,
  url: "",
});
// 点击查看会议群聊二维码
function clickWxGroup() {
  const { item } = toRefs(props);
  if (!item.value.qrCode) {
    showToast("暂未设置群聊");
    return;
  }
  groupChat.url = item.value.qrCode;
  groupChat.visible = true;
}

function clickClosePoster() {
  poster.visible = false;
}
const clickCopy = async (item) => {
  try {
    await toClipboard(
      `腾讯会议线上会\n主题:${item.topic}\n会议时间:${
        item.startTime
      }\n主席:${item.zhuxiNameList.join("、")}\n会议号：${
        item.meetingNo || ""
      }\n入会链接：${item.meetingUrl}`
    );
    showSuccessToast("复制成功");
  } catch (err) {
    showToast("复制失败");
  }
};

function showSpeakerInfoProgress(type) {
  showConfirmDialog({
    title: "温馨提示",
    showCancelButton: false,
    confirmButtonText: "知道了",
    message:
      type === 1
        ? "已完善信息讲者数量 / 参会讲者总数"
        : "已签署劳务协议讲者数量 / 参会讲者总数",
  })
    .then(() => {
      // on confirm
    })
    .catch(() => {
      // on cancel
    });
}
</script>

<style lang="less"></style>
